<template>
  <div class="params">
    <div class="header">
      <!-- 打卡 -->
      <router-link to="/Backstage" class="shou">首页</router-link>/ 商品管理 / 分类参数
    </div>
    <el-alert title="注意:只允许为第三级分类设置参数" type="warning" show-icon></el-alert>
    <!-- 下拉列表 -->
    <div class="xiala">
      请选择商品分类
      <el-cascader
        v-model="value"
        :options="options"
        :props="{ value:'cat_id',expandTrigger: 'hover',label: 'cat_name' }"
      ></el-cascader>
    </div>
    <!-- 切换 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="first">
        <el-button type="primary" disabled>设置动态参数</el-button>
        <!-- 表格 -->
        <el-table :data="dng" stripe height="400" style="width: 100%;margin-top:15px;">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                  <el-tag
                    :key="tag"
                    v-for="tag in props.row.attr_vals.split(',')"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >{{tag}}</el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                  ></el-input>
                  <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="attr_name" label="属性名称" width="280"></el-table-column>
          <el-table-column prop="mg_state" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit"></el-button>
              <el-button type="primary" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态参数" name="second">
        <el-button type="primary" disabled>设置静态参数</el-button>
        <!-- 表格 -->
        <el-table :data="jng" stripe height="400" style="width: 100%;margin-top:15px;">
          <el-table-column type="index" :index="indexMethod" width="60"></el-table-column>
          <el-table-column prop="attr_name" label="属性名称" width="280"></el-table-column>
          <el-table-column prop="attr_vals" label="属性值" width="180"></el-table-column>
          <el-table-column prop="level" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit"></el-button>
              <el-button type="primary" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";
import { spsjlb, dong } from "../../api/api.js";
export default {
  name: "params",
  data() {
    return {
      value: "",
      activeName: "first",
      options: [],
      list: [],
      dng: [],
      jng: []
    };
  },
  methods: {
    //表格列表数
    indexMethod(index) {
      return index * 1;
    },
    xin() {
      spsjlb({
        type: 3
      }).then(res => {
        console.log(res);
        if (res.data.meta.status >= 200 && res.data.meta.status < 300) {
          this.options = res.data.data;
        }
        console.log(this.options);
      });
    },
    //动
    donga() {
      dong({
        id: this.value[2],
        sel: "many",
        attr_vals: ","
      }).then(res => {
        console.log(res);
        if (res.data.meta.status >= 200 && res.data.meta.status < 300) {
          this.dng = res.data.data;
        }
      });
    },
    //静
    jinga() {
      dong({
        id: this.value[2],
        sel: "only"
      }).then(res => {
        console.log(333, res);
        if (res.data.meta.status >= 200 && res.data.meta.status < 300) {
          this.jng = res.data.data;
        }
      });
    },
    open4() {
      this.$message.error("请选择商品的三级分类");
    },
    //条页面
    handleClick(tab, event) {
      console.log(tab, event);
      if (this.value.length == 3) {
        console.log(this.value);
        this.donga();
        this.jinga();
      } else {
        this.open4();
      }
    }
  },
  created() {
    this.xin();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.params {
  height: 832px;
  width: 1620px;
  background-color: #fff;
  border: 1px solid #e9eef3;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
  font-size: 14px;
  padding: 20px;
  overflow: scroll;
  overflow-x: auto;
}
.header {
  color: #606266;
  letter-spacing: 2px;
}
.shou {
  font-weight: bold;
  color: black;
}
.xiala {
  margin-top: 20px;
}
.el-button {
  height: 26px;
  line-height: 26px;
  padding: 0 20px;
  font-size: 12px;
}
</style>
